<template>
  <div class="container">
    <div class="app-container">
      <!-- 购物车页面 -->
      <div class="list">
        <div v-for="item in goodsList" :key="item.id" class="item">
          <img :src="item.picture" alt="">
          <p class="name">
            {{ item.name }} <span class="tag">【赠品】免费安装</span>
          </p>
          <p class="spec" />
          <p class="price">{{ item.price.toFixed(2) }}</p>
          <!-- 商品选中数量 -->
          <p class="count">
            <span class="el-icon-remove-outline" @click="item.count === 0 ? 0 : item.count--" />
            <el-input v-model="item.count" style="width: 40%" placeholder="0" size="mini" />
            <span class="el-icon-circle-plus-outline" @click="item.count++" />
          </p>
          <p class="sub-total">
            {{ ((item.price * 100 * item.count) / 100).toFixed(2) }}
          </p>
        </div>
      </div>
      <div class="total">
        <div>
          合计：<span class="amount">{{
            goodsList
              .reduce(
                (prev, item) => prev + (item.price * 100 * item.count) / 100,
                0
              )
              .toFixed(2)
          }}</span>
        </div>
        <el-button type="primary" round>结算</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Shopping',
  data() {
    return {
      goodsList: [
        {
          id: '4001172',
          name: '太阳能发电板单晶24V电池充电板家用光伏组件400w',
          price: 289.9,
          picture: 'https://gd1.alicdn.com/imgextra/i4/2131656105/O1CN01cMZg3U1uy8jOdRcPu_!!2131656105.jpg_400x400.jpg',
          count: 2
        },
        {
          id: '4001009',
          name: '逆变器',
          price: 109.8,
          picture:
            'https://gw.alicdn.com/imgextra/O1CNA1QDtEMM1eYSkYe1psi_!!4036423883-0-psf.jpg_Q75.jpg_.webp',
          count: 3
        },
        {
          id: '4001874',
          name: '电池组',
          price: 488,
          picture:
            'https://gd3.alicdn.com/imgextra/i4/144442182/O1CN018r7VJ01RzOpdtGuNJ_!!144442182.jpg_400x400.jpg',
          count: 1
        },
        {
          id: '4001649',
          name: '控制器',
          price: 139,
          picture:
          'https://gd2.alicdn.com/imgextra/i2/49712962/O1CN015ojEwn1Xkds5TKwTM_!!49712962.jpg_400x400.jpg',
          count: 1
        },
        {
          id: '400164',
          name: '监控系统',
          price: 144,
          picture:
            'https://gw.alicdn.com/imgextra/i3/3018248830/O1CN01xsYkVw2F6BzniGgBt_!!3018248830.jpg_Q75.jpg_.webp',
          count: 1
        },
        {
          id: '400149',
          name: '线缆和保险丝',
          price: 14,
          picture:
            'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=584478408,1676175298&fm=199&app=68&f=JPEG?w=750&h=750&s=0AE27A225E9C4FF91CFDA5DE010080B0',
          count: 1
        },
        {
          id: '4049',
          name: '支架和固定件',
          price: 123,
          picture:
            'https://fc1tn.baidu.com/it/u=4239875614,3004976335&fm=202&mola=new&crop=v1',
          count: 1
        },
        {
          id: '49',
          name: '散热器',
          price: 10,
          picture:
            'https://fc1tn.baidu.com/it/u=3807289458,2332943413&fm=202&mola=new&crop=v1',
          count: 1
        }
      ]
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.list {
  width: 990px;
margin-left: 50px;
}

.item {
  padding: 15px;
  transition: all 0.5s;
  display: flex;
  border-top: 1px solid #e4e4e4;
}

.item:nth-child(4n) {
  margin-left: 0;
}

.item:hover {
  cursor: pointer;
  background-color: #f5f5f5;
}

.item img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.item .name {
  font-size: 18px;
  margin-right: 10px;
  color: #333;
  flex: 3;
}

.item .name .tag {
  display: block;
  padding: 2px;
  font-size: 12px;
  color: #999;
}

.item .price,
.item .sub-total {
  font-size: 18px;
  color: firebrick;
  flex: 1;
}

.item .price::before,
.item .sub-total::before,
.amount::before {
  content: "¥";
  font-size: 12px;
}

.item .spec {
  flex: 1;
  color: #888;
  font-size: 14px;
}

.item .count {
  flex: 1;
  color: #aaa;
}

.total {
  width: 990px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #e4e4e4;
  padding: 20px;
}

.total .amount {
  font-size: 18px;
  color: firebrick;
  font-weight: bold;
  margin-right: 50px;
}
</style>
